<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
</head>
<body>
    <!-- router-->
    <div id="app">
       <p>
           <!-- 可以使用router-link组件来进行导航 -->
           <!-- 可以通过to这个属性来指定链接 -->
           <!-- router-link默认会被渲染成一个<a>标签 -->
           <router-link to="/home" >home</router-link>
           <router-link to="/news" >news</router-link>
       </p>
       <!-- 路由需要一个出口 -->
       <!-- 然后才可以匹配到的组件渲染出来 -->
       <router-view></router-view>
    </div>

    <script>
        //1.要定义路由组件
        const Home = {template:'<div>首页</div>'}
        const News = {template:'<div>新闻</div>'}

        //2.定义路由(每个路由应该映射为一个组件)
        const routes = [
            {path:'/home',component:Home},
            {path:'/news',component:News}
        ]

        //3.创建router的对象(实例),需要传入routes的配制信息
        const router = new VueRouter({
            routes
        })


        //4.创建Vue对象和挂载根实例
        //一定要通过router配置参数注入路由，从而让整个应用都有路由的功能
        let vm = new Vue({
            el:"#app",
            data:{},
            //将路由router添加到Vue中
            router
        })
    </script>
</body>
</html>